<template>
	<view class="content">
		<u-navbar
			title="编辑银行卡" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page" v-if="!loading">
			<view class="text1">
				需添加实名认证的身份证所开户的银行卡
			</view>
			<view class="item flex-a">
				<image class="left-img" src="/static/yl.jpg"></image>
				<input :value="branchName" type="text" style="flex: 1 1 0%;" placeholder="请填写您的银行卡所属支行"
					@input="branchNameChanged"/>
			</view>
			<view class="item flex-a">
				<image class="left-img" src="/static/yl.jpg"></image>
				<input :value="cardNumber" type="text" style="flex: 1 1 0%;" placeholder="请填写您的银行卡号"
					@input="cardNumberChanged"/>
			</view>
			<view class="item flex-a" style="align-items: center;">
				<u-icon name="account-fill" size="20" :color="`${mainColor}`"></u-icon>
				<view style="margin-left: 10px;">{{holdName}}</view>
			</view>
			<view class="flex-a" style="margin-top: 20px;">
				默认收款
				<u-switch v-model="isDefault" @change="switchChanged" style="margin-left: 10px;"
					size="20"
					:active-color="`${mainColor}`"></u-switch>
			</view>
			
		</view>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="doSubmit"
				:custom-style="{color: `${textColor}`}">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { getBankCard, updateBankCard, userCenter } from '@/api';
	import token from '@/utils/token';
	import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				id: null,
				loading: false,
				branchName: '',
				cardNumber: '',
				holdName: '',
				isDefault: false
			}
		},
		onLoad({id}) {
			this.id = id;
			this.getSystemInfo();
			this.loadBankCard(id);
		},
		methods: {
			async loadBankCard(id) {
				this.loading = true;
				const res = await getBankCard(id);
				const data = res.data;
				this.loading = false;
				this.branchName = data.branch_name;
				this.cardNumber = data.card_number;
				this.holdName = data.hold_name;
				this.isDefault = data.is_default;
			},
			branchNameChanged({detail}) {
				this.branchName = detail.value.trim();
			},
			cardNumberChanged({detail}) {
				this.cardNumber = detail.value.trim();
			},
			switchChanged(value) {
				this.isDefault = value;
			},
			async doSubmit() {
				if (this.branchName.length === 0) {
					this.notify('银行卡所属支行不能为空！');
					return
				}
				if (this.cardNumber.length === 0) {
					this.notify('银行卡卡号不能为空！');
					return
				}
				
				const res = await updateBankCard(this.id, this.branchName, this.cardNumber, this.isDefault);
				
				if (res.code === 2000) {
					this.setToast(res.msg);
					uni.navigateBack();
				}
			},
			notify(message) {
				uni.showToast({
					icon:'none',
					title:message
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 10px 20px 10px;
	
	.text1 {
	    width: 100%;
	    padding-left: 10px;
	    box-sizing: border-box;
	    font-size: 14px;
	    height: 41px;
	    line-height: 41px;
	    color: #e33233;
	    background-color: #fff5f4;
	}
	
	.item {
	    width: 100%;
	    height: 52px;
	    padding-top: 15px;
	    box-sizing: border-box;
	    border-bottom: 1px solid #f1f1f1;
		
		.left-img {
		    position: relative;
		    top: 4px;
		    left: 4px;
		    width: 20px;
		    height: 15px;
		    margin-right: 15px;
		}
	}
}

.fix-bottm {
    position: fixed;
    bottom: 0;
    left: 0;
	right: 0;
    padding: 10px;
    box-sizing: border-box;
}
</style>
